<template>
  <view class="container">
    <!-- 顶部用户信息 -->
    <view class="user-info" v-if="userInfo.nickname">
      <img class="avatar" :src="userInfo.headSculpture" @click="toLogin"  alt=""/>
      <view class="user-details" @click="toLogin">
        <view style="display: flex; align-items: center;">
          <text class="user-name">{{userInfo.nickname}}</text>
          <text class="user-tag" v-if="userInfo.reviewStatus == 0">待审核</text>	  
          <text class="user-tag" v-else-if="userInfo.reviewStatus == 1">审核中</text>
		  <text class="user-tag" v-else-if="userInfo.reviewStatus == 3">审核不通过</text>
		  <text class="user-tag" v-else-if="userInfo.whetherEnable == 0">禁用</text>
          <text class="user-tag" v-else-if="userInfo.reviewStatus == 2">普通商户</text>
		  <text class="user-tag" v-else-if="userInfo.reviewStatus == 4">定向商户</text>
        </view>
        <text class="user-score">信誉分：{{userInfo.creditScore}}</text>
      </view>
    </view>

    <view class="user-info" v-else>
      <view class="tn-flex tn-flex-row-between" style="text-align: center">
        <view style="text-align: center;" class="login-btn" @click="toLogin">
          <text class="tn-icon-wechat tn-padding-right-xs tn-text-xl"></text>
          <text class="">授权登录</text>
        </view>
      </view>
    </view>

    <!-- 订单管理 -->
    <view class="order-section">
      <text class="section-title">订单管理</text>
      <view class="order-options">
        <view class="order-item" v-for="(item, index) in orderList" :key="index" @click="toPage(index, 'order-list')">
          <view class="circle" v-if="item.url">
            <image v-if="item.label === '全部订单'" src="@/assets/img/order.svg" style="height: 25px;"></image>
            <image v-if="item.label === '订单评价'" src="@/assets/img/pingjia.svg" style="height: 25px;"></image>
            <image v-if="item.label === '在线客服'" src="@/assets/img/kefu.svg" style="height: 25px;"></image>
            <image  v-if="item.label === '钱包'" src="@/assets/img/qianbao.svg" style="width: 25px;"></image>
          </view>
          <button class="circle" v-else open-type="contact" style="width: 80rpx; height: 80rpx">
            <image v-if="item.label === '在线客服'" src="@/assets/img/kefu.svg" style="height: 25px; position: absolute; top: 8px"></image>
          </button>

          <text class="label">{{ item.label }}</text>
        </view>
      </view>
    </view>

    <!-- 列表菜单 -->
    <view class="menu-section">
      <button class="menu-item1" open-type="feedback">
        <view class="menu-item-box">
          <view class="menu-text">问题反馈</view>
          <TnIcon name="right" />
        </view>
        <view class="line"></view>
      </button>

      <button class="menu-item1" v-for="(item, index) in menuList" :key="index" @click="toPage(index, 'menu-list')">
        <view class="menu-item-box">
          <text class="menu-text">{{ item.label }}</text>
          <TnIcon name="right" />
        </view>
        <view class="line" v-if="index < 4"></view>
      </button>
    </view>

    <TnPopup v-model="shouqianModal" :custom="true">
      <view class="custom-modal-content" style="padding-bottom: 15px">
        <image :show-menu-by-longpress="true" src='https://lemawuyou.oss-cn-shanghai.aliyuncs.com/image/presale.jpg'
               style="width: 300px; height: 400px" @click="previewQRCodeImage" alt=""></image>
        <view class="tn-text-center tn-padding-top tn-text-lg">长按可识别微信二维码</view>
      </view>
    </TnPopup>
  </view>
</template>

<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import {queryUserInfo} from "@/api/login";
  import TnIcon from '@tuniao/tnui-vue3-uniapp/components/icon/src/icon.vue';
  import TnPopup from '@tuniao/tnui-vue3-uniapp/components/popup/src/popup.vue'
  import {onShow} from "@dcloudio/uni-app";
  const orderList: Array<Record<string, string>> = [
    { label: "全部订单", url: "/pages/trade/index" },
    { label: "订单评价", url: "/pages/evaluate/index" },
    { label: "在线客服", url: "" },
    { label: "钱包", url: "/pages/wallet/index" }
  ];

  const menuList: Array<Record<string, string>> = [
    { label: "平台规则", url: "/pages/user/platformRules/index" },
    { label: "接单流程", url: "/pages/user/orderProcess/index" },
    { label: "官方微信", url: "" },
    { label: "信誉分规则", url: "creditRules" },
    { label: "修改个人信息", url: "/pages/login/index?type=update" }
  ];

  // 用户信息
  const userInfo = ref<Record<string, string>>({ nickname: "" });

  /**
   * 跳转到指定页面
   * @param index
   * @param type
   */
  const shouqianModal = ref(false);
  const toPage = (index: number, type: string) => {
    if (index === 2 && type === 'menu-list') {
      shouqianModal.value = true;
      return;
    }

    if (index === 3 && type === 'menu-list') {
      uni.showToast({
        title: "功能暂未开放",
        icon: "none"
      })
      return;
    }

    if (index === 2 && type === 'order-list') {
      return;
    }

    uni.navigateTo({
      url: type === 'menu-list' ? menuList[index].url : orderList[index].url,
    })
  }

  const previewQRCodeImage = () => {
    uni.previewImage({
      urls: ['https://lemawuyou.oss-cn-shanghai.aliyuncs.com/image/presale.jpg']
    })
  }

  const copyShareCode = (shareCode: string) => {
    uni.setClipboardData({
      data: shareCode,
    })
  }

  /**
   * 获取用户信息
   * @returns {Promise<void>}
   */
  let retryCount = 0;
  const getUserInfo = async (): Promise<void> => {
    const res = await queryUserInfo();
    try {
      if (res.code === 200) {
        uni.setStorageSync("userInfo", res.data)
        userInfo.value = res.data;
      } else if (res.code === 500) {
        uni.setStorageSync('userInfo', null)
        // await uni.navigateTo({url: '/pages/login/index'})
      } else {
        // 添加重试次数限制（示例：最多重试3次）

        const retry = () => {
          if (retryCount < 3) {
            setTimeout(() => {
              getUserInfo()
              retryCount++
            }, 1000)
          }
        }
        retry()
      }
    } catch (error) {
      console.error('用户信息获取失败:', error)
    }
  }

  /**
   * 刷新信息
   */
  const refreshData = (init = false) =>{
    if(!userInfo?.value?.nickname) {
      getUserInfo()
    }
    if (init) {
      getUserInfo()
    }
  }


  /**
   * 跳转login
   */
  const toLogin = () => {
    uni.navigateTo({
      url: '/pages/login/index?type=update'
    })
  }

  onMounted(() => {
    // setTimeout(() => {
    //   getUserInfo();
    // }, 3000)
  })
  onShow(() =>{
    // refreshData(true);
    setTimeout(() => {
      getUserInfo();
    }, 1000)
  })

  defineExpose({
    refreshData
  })
</script>

<style lang="scss" scoped>
.container {
  background-color: #f8f8f8;
  position: relative;
}

.user-info {
  background: url("https://lemawuyou.oss-cn-shanghai.aliyuncs.com/client/images/mine/my-bg4.png");
  display: flex;
  padding: 80px 30rpx;
  height: 400rpx;
  background-position: 100% 100%;
}

.avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}

.user-details {
  display: flex;
  flex-direction: column;
}

.user-name {
  font-size: 32rpx;
  font-weight: bold;
}
.user-tag {
  font-size: 10px;
  padding: 4rpx 12rpx;
  border-radius: 8px;
  color: #f56c6c;
  background-color: rgb(254, 240, 240);
  border: 1px solid rgb(253, 226, 226);
  margin-left: 6px;
}

.user-tag[disabled] {
  background-color: #ccc;
}

.user-tag[reviewStatus="0"] {
  background-color: #ff9900;
}

.user-tag[reviewStatus="1"] {
  background-color: #0099ff;
}

.user-tag[reviewStatus="3"] {
  background-color: #ff3333;
}

.user-tag[reviewStatus="2"] {
  background-color: #55ff7f;
}

.user-tag[reviewStatus="4"] {
  background-color: #55ff7f;
}
.user-score {
  font-size: 24rpx;
  color: #888;
  margin-top: 6rpx;
}

.order-section {
  padding: 30rpx 20rpx;
  margin-left: 32rpx;
  width: calc(100% - 64rpx);
  border-radius: 8px;
  background: #FFFFFF;
  box-shadow: 0 4px 20px 0 rgba(153, 153, 153, 0.15);
  position: absolute;
  top: 300rpx;
}

.section-title {
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.order-options {
  display: flex;
  justify-content: space-between;
  margin-top: 30rpx;
}

.order-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  position: relative;
}

.circle {
  width: 80rpx;
  height: 80rpx;
  background-color: #EDF1FD;
  border-radius: 50%;
  margin-bottom: 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  img {
    width: 20px;
    height: 20px;
  }
}

.label {
  font-size: 24rpx;
  color: #333;
}

.menu-section {
  position: absolute;
  top: 580rpx;
  margin-left: 32rpx;
  width: calc(100% - 64rpx);
  border-radius: 8px;
  background: #FFFFFF;
  box-shadow: 0 4px 20px 0 rgba(153, 153, 153, 0.15);
  padding-bottom: 0;
  padding-top: 10rpx;
}

.menu-item {
  padding: 30rpx 30rpx 20rpx 20rpx;
  background: #ffffff;
  .menu-item-box {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

.menu-text {
  font-size: 28rpx;
  color: #333333;
}

.arrow {
  font-size: 28rpx;
  color: #999;
}
.menu-item1 {
  padding: 0 30rpx 0 20rpx;
  height: 60px;
  background: #FFFFFF;
  line-height: 60px;
  border-bottom: 1px solid #f5f5f5;
  .menu-item-box {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
.line {
  width: 100%;
  height: 1px;
  background-color: #F2F2F2;
}
.login-btn {
  padding: 5px 10px;
  font-size: 14px;
  height: 33px;
  width: 103px;
  color: #634738;
  background-color: #F1C68E;
  box-shadow: 3px 3px 4px #F1C68E10;
  border-radius: 33px;
  margin: auto;
}
</style>
